<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--给新增按钮绑定单击事件-->
            <input type="button" value="新增" v-on:click="addBrand()"><br>
            <hr>
            <table border="1" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>品牌名称</th>
                    <th>企业名称</th>
                    <th>排序</th>
                    <th>品牌介绍</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <!--使用v-for循环遍历-->
                <tr v-for="(brand,i) in brands" align="center">
                    <td>{{i + 1}}</td>
                    <td>{{brand.brandName}}</td>
                    <td>{{brand.companyName}}</td>
                    <td>{{brand.ordered}}</td>
                    <td>{{brand.description}}</td>
                    <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                    <td><a href="#">修改</a><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brands:[]
                    }
                },
                methods:{
                  addBrand() {
                      location.href = "/VueDemo/addBrand.html";
                  }
                },
                // 页面加载完成后利用mounted方法发送异步请求并查询数据
                mounted() {
                    // 发送异步请求并查询数据
                    // 在Vue的实例方法中，this指向Vue实例本身
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/VueDemo/selectAllServlet"
                    }).then(function (resp) {
                        // 获取响应数据，并将数据赋给brands
                        // 错误写法：this.brands = resp.data;
                        /* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）
                            所以需要提前将代指Vue示例本身的this赋给_this
                         */
                        //axios会自动将获取的JSON字符串数据转为js对象数组
                        _this.brands = resp.data;
                    })
                }
            })
        </script>
    </body>
</html>